<template>
    <div id="AndroidType">
        <van-cell-group inset title="所有IT人员">
            <template v-for="item in allItList" v-bind:key="item.ryD_Id">
                <van-cell :title="item.ryD_Name">
                    <van-button size="small" type="warning" @click="edit(item)">
                        编辑类别</van-button>
                </van-cell>
            </template>
        </van-cell-group>
        <van-cell-group inset :title="'（'+RYD_UserName+'）所负责的事件类别'">
            <template v-for="item in myTypeListLink" v-bind:key="item.ryD_DemandTypeNo">
                <van-cell :title="item.ryD_DemandTypeName">
                    <van-button size="small" type="warning" @click="relieveLink(item.ryD_DemandTypeNo)">
                        解除</van-button>
                </van-cell>
            </template>
            <van-cell>
                <van-button block type="success" @click="showAddMyType">添加</van-button>
            </van-cell>
        </van-cell-group>
        <van-popup v-model:show="myTypeShow" style="width:90vw ;border-radius: 15px ;"
            :before-close="function () { RYD_DemandTypeNo = []; return true }">
            <van-cell-group>
                <p style="text-align: center;font-size: 18px;">请选择需要新增的事件类别</p>
                <van-cell>
                    <van-checkbox-group v-model="RYD_DemandTypeNo" name="RYD_DemandTypeNo">
                        <van-cell v-for="item in myNoTypeListLink" v-bind:key="item.ryD_DemandTypeNo">
                            <van-checkbox shape="square" :name="item.ryD_DemandTypeNo">{{ item.ryD_DemandTypeName }}
                            </van-checkbox>
                        </van-cell>
                    </van-checkbox-group>
                </van-cell>
                <div style="display:flex ;">
                    <van-button type="default" size="large" @click="myTypeShow = false; RYD_DemandTypeNo = [];">取消
                    </van-button>
                    <van-button type="default" size="large" @click="addMyTypeLink"
                        style="color: var(--van-dialog-confirm-button-text-color);">确认</van-button>
                </div>
            </van-cell-group>
        </van-popup>
        <van-cell-group inset title="当前站点已有事件类别">
            <template v-for="item in typeList" v-bind:key="item.ryD_DemandTypeNo">
                <van-cell :title="item.ryD_DemandTypeName">
                    <van-button size="small" type="danger" @click="deleteType(item.ryD_DemandTypeNo)">
                        删除</van-button>
                </van-cell>
            </template>
            <van-cell>
                <van-button block type="success" @click="typeShow = true">添加</van-button>
            </van-cell>
        </van-cell-group>


        <van-popup v-model:show="typeShow" style="width:90vw ;border-radius: 15px ;">
            <van-cell-group>
                <van-form @submit="addType">
                    <p style="text-align: center;font-size: 18px;">请填写需要新增的事件类别</p>
                    <van-cell>
                        <van-field v-model="RYD_DemandTypeName" name="RYD_DemandTypeName" label="类别名称"
                            placeholder="请填写类别名称" :rules="[{ required: true, message: '请填写类别名称' }]" />
                    </van-cell>
                    <div style="display:flex ;">
                        <van-button type="default" size="large" @click="typeShow = false; RYD_DemandTypeNo = [];">取消
                        </van-button>
                        <van-button type="default" size="large"
                            style="color: var(--van-dialog-confirm-button-text-color);" native-type="submit">确认
                        </van-button>
                    </div>
                </van-form>

            </van-cell-group>
        </van-popup>


        <van-overlay :show="loading">
            <div class="wrapper">
                <van-loading type="spinner" size="5vh" vertical color="#fff">加载中...</van-loading>
            </div>
        </van-overlay>
    </div>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
import { inject, isRef, reactive, ref, toRef } from 'vue';
import axios from '@/utils/axios';
// eslint-disable-next-line no-unused-vars
import { ElMessage, ElMessageBox } from 'element-plus'
import { Dialog, Toast } from 'vant';


let nav = inject('nav');
nav.showLeft = true;
nav.textLeft = '返回';
nav.title = 'ITSM 类别管理';
nav.showRight = false;

let RYD_UserId = inject('RYD_UserId');
let loading = ref(true);
// eslint-disable-next-line no-unused-vars
let myTypeShow = ref(false);
let typeShow = ref(false);

let RYD_DemandTypeNo = ref([]);

let RYD_DemandTypeName = ref();

let allItList = ref();
let RYD_UserName = ref("无");

let typeList = ref([])
let typeListLink = ref([])

let myTypeListLink = ref([]);
let myNoTypeListLink = ref([]);

let RYD_Company = '';
let selectRYD_UserId = "";
const edit = (res) => {
    selectRYD_UserId = res.ryD_Id;
    loading.value = true;
    RYD_UserName.value = res.ryD_Name;
    axios({
        method: 'Put',
        url: '/api/DemandType',
        data: {
            RYD_Company: RYD_Company,
            RYD_UserId: res.ryD_Id
        }
    }).then(typeListLinkres => {
        typeListLink.value = typeListLinkres;
        myNoTypeListLink.value = new Array(...typeList.value);
        myTypeListLink.value = [];
        typeList.value.forEach(element => {
            typeListLink.value.forEach(item => {
                if (element.ryD_DemandTypeNo == item.ryD_DemandTypeNo) {
                    let myLink = element;
                    myTypeListLink.value.push(myLink);
                }
            })
        });

        for (let i = myNoTypeListLink.value.length - 1; i >= 0; i--) {
            try {
                myTypeListLink.value.forEach(element => {
                    if (myNoTypeListLink.value[i].ryD_DemandTypeNo == element.ryD_DemandTypeNo) {
                        myNoTypeListLink.value.splice(i, 1);
                        throw new Error('End Loop');
                    }
                });
            } catch (error) {
                if (error.message === "EndLoop") {
                    throw error;
                }
            }
        }
        loading.value = false;
    }).catch(() => {
        Toast.fail({ overlay: true, message: '失败' });
        loading.value = false;
    })
}

let showAddMyType = () => {
    if (myNoTypeListLink.value.length == 0) {
        Toast.fail({ overlay: true, message: '暂无类别可新增' });
        myTypeShow.value = false;
    } else {
        myTypeShow.value = true;
    }
}
//!!!!!!!!!!!将新增的添加到页面列表中，后台接口返回值换成类别编号
let addType = () => {
    Toast.loading({
        message: '添加中',
        duration: 0,
        overlay: true
    });
    axios({
        method: 'Post',
        url: '/api/DemandType',
        data: {
            RYD_UserId:RYD_UserId,
            RYD_DemandTypeName: RYD_DemandTypeName.value,
            RYD_Company: RYD_Company
        }
    }).then(res => {
        if (res != 0 && res != "" && res != null) {
            typeList.value.push({
                ryD_UserId: selectRYD_UserId,
                ryD_DemandTypeName: RYD_DemandTypeName.value,
                ryD_DemandTypeNo: res
            })
            myNoTypeListLink.value.push({
                ryD_UserId: selectRYD_UserId,
                ryD_DemandTypeName: RYD_DemandTypeName.value,
                ryD_DemandTypeNo: res
            })
            Toast.success({ overlay: true, message: '添加成功' });
            RYD_DemandTypeNo.value = [];
            typeShow.value = false;
        } else {
            Toast.fail({ overlay: true, message: '添加失败' })
        }
    }).catch(() => {
        Toast.fail({ overlay: true, message: '错误' })
    })
}
let addMyTypeLink = () => {
    Toast.loading({
        message: '添加中',
        duration: 0,
        overlay: true
    });
    axios({
        method: 'Post',
        url: '/api/DemandLink',
        data: {
            RYD_UserId:selectRYD_UserId,
            RYD_DemandTypeNo: RYD_DemandTypeNo.value,
            RYD_Company: RYD_Company
        }
    }).then(res => {
        if (res == true) {

            // for (let i = typeList.value.length - 1; i >= 0; i--) {

            //     if (RYD_DemandTypeNo.value.indexOf(typeList.value[i].ryD_DemandTypeNo) >= 0) {
            //         myTypeListLink.value.push(typeList.value[i])
            //         console.log(myNoTypeListLink.value[i])
            //         myNoTypeListLink.value.splice(i, 1);
            //     }
            //     // if (myTypeListLink.value[i].ryD_DemandTypeNo == RYD_DemandTypeNo) {
            //     //     myNoTypeListLink.value.push(myTypeListLink.value[i]);
            //     //     myTypeListLink.value.splice(i, 1);
            //     // }
            // }
            typeList.value.forEach(element => {
                if (RYD_DemandTypeNo.value.indexOf(element.ryD_DemandTypeNo) >= 0) {
                    myTypeListLink.value.push(element);

                    for (let i = myNoTypeListLink.value.length - 1; i >= 0; i--) {
                        if (myNoTypeListLink.value[i].ryD_DemandTypeNo == element.ryD_DemandTypeNo) {
                            myNoTypeListLink.value.splice(i, 1);
                        }
                    }
                }
            })
            Toast.success({ overlay: true, message: '添加成功' });
            RYD_DemandTypeNo.value = [];
            myTypeShow.value = false;
        } else {
            Toast.fail({ overlay: true, message: '添加失败' })
        }
    }).catch(() => {
        Toast.fail({ overlay: true, message: '错误' })
    })
}

let relieveLink = (RYD_DemandTypeNo) => {
    Dialog.confirm({
        title: '警告',
        message:
            '确定要解除所选事件类别吗',
    })
        .then(() => {
            loading.value = true;
            axios({
                method: 'put',
                url: '/api/DemandLink',
                data: {
                    RYD_Company: RYD_Company,
                    RYD_UserId: selectRYD_UserId,
                    RYD_DemandTypeNo: [RYD_DemandTypeNo]
                }
            }).then(res => {
                if (res == true) {
                    for (let i = myTypeListLink.value.length - 1; i >= 0; i--) {
                        if (myTypeListLink.value[i].ryD_DemandTypeNo == RYD_DemandTypeNo) {
                            myNoTypeListLink.value.push(myTypeListLink.value[i]);
                            myTypeListLink.value.splice(i, 1);
                        }
                    }
                    Toast.success({ overlay: true, message: '解除成功', duration: 500 });
                    loading.value = false;
                } else {
                    Toast.fail({ overlay: true, message: '失败' });
                }
            }).catch(() => {
                Toast.fail({ overlay: true, message: '失败' });
                loading.value = false;
            })

        })
        .catch(() => {

        })
}

let deleteType = (RYD_DemandTypeNo) => {
    Dialog.confirm({
        title: '警告',
        message:
            '确定要删除所选事件类别吗',
    })
        .then(() => {
            loading.value = true;
            axios({
                method: 'Delete',
                url: '/api/DemandType',
                data: {
                    RYD_Company: RYD_Company,
                    RYD_UserId: RYD_UserId,
                    RYD_DemandTypeNo: RYD_DemandTypeNo
                }
            }).then(res => {
                if (res == true) {
                    Toast.success({ overlay: true, message: '删除成功', duration: 500 });

                    for (let i = typeList.value.length - 1; i >= 0; i--) {
                        if (typeList.value[i].ryD_DemandTypeNo == RYD_DemandTypeNo) {
                            // myNoTypeListLink.value.push(myTypeListLink.value[i]);
                            typeList.value.splice(i, 1);
                        }
                    }
                    for (let i = myTypeListLink.value.length - 1; i >= 0; i--) {
                        if (myTypeListLink.value[i].ryD_DemandTypeNo == RYD_DemandTypeNo) {
                            myTypeListLink.value.splice(i, 1);
                        }
                    }
                    for (let i = myNoTypeListLink.value.length - 1; i >= 0; i--) {
                        if (myNoTypeListLink.value[i].ryD_DemandTypeNo == RYD_DemandTypeNo) {
                            myNoTypeListLink.value.splice(i, 1);
                        }
                    }
                    loading.value = false;
                } else {
                    Toast.fail({ overlay: true, message: '失败' });
                }
            }).catch(() => {
                Toast.fail({ overlay: true, message: '失败' });
                loading.value = false;
            })

        })
        .catch(() => {

        })
}

axios({
    method: 'get',
    url: '/api/GetCompany?RYD_UserId=' + RYD_UserId
}).then(res => {
    RYD_Company = res;

    axios({
        method: 'get',
        url: '/api/GetAllItName?RYD_Company=' + RYD_Company
    }).then(res => {
        if (res != '' && res != null) {
            allItList.value = res;
        }
        loading.value = false;

    }).catch(() => {
        Toast.fail({ overlay: true, message: '失败' });

        loading.value = false;
    })
    axios({
        method: 'get',
        url: '/api/DemandType?RYD_Company=' + RYD_Company
    }).then(typeListres => {
        typeList.value = typeListres;

    }).catch(() => {
        Toast.fail({ overlay: true, message: '失败' });
        loading.value = false;
    })

}).catch(() => {
    Toast.fail({ overlay: true, message: '失败' });
    loading.value = false;
})

</script>

<style scoped>

</style>